<template>
  <div class="package-buy-container">
    <div class="package-buy">
      <div class="title_set_meal">
        <span><img src="/web-hft-ee/static/img/enterprise_course/title_left.png"></span>
        <span>套餐选择</span>
        <span><img src="/web-hft-ee/static/img/enterprise_course/title_right.png"></span>
      </div>

      <div class="set_meal_container">
        <div v-for="(el,index) in LevelPrice" class="set_meal_list" @click="pick(index,el)"
             :class="activeClass === index ? 'active':''">
          <div class="set_meal_item">
            <p> {{ el.months }}个月</p>
            <p> ￥{{ el.price }}</p>
          </div>
        </div>
      </div>

      <div v-if="isPriceSpread" class="flex_start price_spread">
        <van-icon style="margin-top: 2px;margin-right: 5px" name="info" color="#0079FE"/>
        <span>原购买套餐可抵扣 <span style="color: red">¥ {{ subtractPrice }}</span></span>
      </div>


      <div class="package_buy_btn">
        <div @click="buy">购买</div>
      </div>
    </div>
    <div style="height: 20px;background: white"></div>
    <org-right :level="targetType" :type="false"></org-right>


  </div>
</template>

<script>
import OrgRight from '../../organization/myOrg/components/OrgRight'
import EnterpriseLevelAPI from '../../../repo/api/EnterpriseLevelAPI'
import PackageMixIn from './PackageMixIn'
import {Toast, Dialog} from 'vant'
import {verifyOrder} from '../../../utils/payVerify'
import {isIOS} from '../../../utils/util'

export default {
  name: 'package-buy',
  components: {
    OrgRight
  },
  mixins: [PackageMixIn],
  data () {
    return {
      activeClass: undefined,
      targetType: this.$route.query.targetType || 0,
      LevelPrice: [],
      chooseData: '',
      subtractPrice: 0,
      currentSubscriptionId: 0,
      isPriceSpread: false,
      buyMonths: 3,
      limit_3: 0,
      deductionPrise: 0,
    }
  },
  mounted () {
    // verifyOrder(this.$route.query.prepay_id)
    window.onpageshow = function (e) {
      if (e.persisted || (window.performance && window.performance.navigation.type === 2)) {
        window.location.reload()
      }
    }

    window['jsGetSalesCallBack'] = (jsonStr) => {
      this.jsGetSalesCallBack(jsonStr)
    }

  },
  beforeDestroy () {
    window.onpageshow = () => {

    }
  },
  methods: {
    pick (index, data) {
      console.log(data)
      //price 抵扣 deductionPrise
      this.deductionPrise = data.price
      this.buyMonths = data.months
      this.activeClass = index
      this.chooseData = data
    },
    jsGetSalesCallBack (callback) {
      let data = typeof callback === 'object' ? callback : JSON.parse(callback)
      if (data) {
        Dialog.confirm({
          message: data.content,
          confirmButtonText: '去联系',
        }).then(() => {
          window.open(`tel://${data.tellPhone}`)
        })
      }
    },
    buy () {

      if (isIOS) {
        window.zshft.jsGetSalesCall('jsGetSalesCallBack')
      } else {
        if (this.chooseData === '') {
          Toast('请选择')
          return
        }

        // 45	限制购买免费试用套餐1
        // 46	套餐1
        // 47	套餐2
        // 48	套餐3
        //订阅的 要小于或或等于 当前要购买的 才能购买。
        //当前要购买的  小于  购买过得，无法购买

        if (this.subscriptionId > this.currentSubscriptionId) {
          Toast('无法购买低等级的套餐')
          return
        } else {

        }

        //first purchase restrictions,this package can only be purchased once, trimester
        //只有要买3个月的才有限制。

        //升级的天数 一定要大于正在使用的月份
        //同等级续费，大于一个月之后才能购买
        if (this.buyMonths === 3 && this.limit_3 === 1) {
          Toast('这个套餐只可以购买一次')
          return
        }

        //当前要支付的 - 抵扣金  小于 0 提示用户。
        // 480  - 300
        if ((this.deductionPrise - this.subtractPrice) < 0) {
          Toast('抵扣金额小于0')
          return
        }

        this.addOrder(this.targetType, this.chooseData.months)
      }

    },
    fetchData () {
      EnterpriseLevelAPI.getGroupLevelPayTypeInfoById(this.targetType).then((result) => {
        let res = result.responseData

        this.limit_3 = res.limit_3
        this.subtractPrice = res.subtractPrice
        this.LevelPrice = res.LevelPrice
        //购买不同的套餐  buy difference packages
        this.currentSubscriptionId = res.levelInfo.id

        //升级显示。不同等级的时候显示
        if (this.subscriptionId !== this.currentSubscriptionId) {
          this.isPriceSpread = true
        }
        //如果价格等于 0 不显示。
        if (this.subtractPrice === '0' || this.subtractPrice === undefined) {
          this.isPriceSpread = false
        }
      })
    },
  }
}
</script>

<style scoped>
.set_meal_container {
  clear: both;
  margin-left: 16px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.set_meal_list {
  width: 28%;
  margin-right: 11px;
  text-align: center;
  border: 2px #EBEEF1 solid;
  margin-bottom: 16px;
  border-radius: 6px;
  padding: 15px 0px;
}

.package-buy {
  border-bottom: 8px solid #F2F5F8;
  background: white;
  border-top: 1px transparent solid;

}

.package-buy-container {
  min-height: 100vh;
  background: white;
}

.active {
  color: #D5B67F;
  border: 2px #D5B67F solid;
  font-weight: bolder;
}

.title_set_meal {
  margin: 24px auto;
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.title_set_meal img {
  width: 30px;
  margin: 8px 10px;

}

.package_buy_btn {
  text-align: center;
  border-radius: 25px;
  height: 48px;
  background: #232322;
  line-height: 48px;
  color: white;
  width: 90%;
  margin: 8px auto 24px auto;
}

.price_spread {
  font-size: 12px;
  border: 1px #D6EBFF solid;
  background: #EBF5FF;
  padding: 5px;
  border-radius: 5px;
  width: 90%;
  margin: 0 auto;
}

</style>
